<template>
  <div class="notice-detail">
    <h1 class="detail-title">{{ notice.title }}</h1>
    <div class="detail-info">
      <span class="time">发布时间：{{ dayjs(notice.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
    </div>
    <div class="detail-content" v-html="notice.content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { get } from '@/net'

const route = useRoute()
const notice = ref({})

onMounted(async () => {
  const id = route.params.id
  get(`/api/notice/getNoticeById/${id}`, (res) => {
    // console.log(res)
    notice.value = res
  })
})
</script>

<style scoped>
.notice-detail {
  max-width: 1150px;
  margin: 30px auto;
  padding: 20px;
  border-radius: 8px;
}

.detail-title {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.detail-info {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.detail-content {
  line-height: 2;
  color: #666;
  font-size: 15px;
  padding: 0 20px;
}

.detail-content p {
  text-indent: 2em;
}
</style>